<template>
  <div>
    <div class="app">
      <h2>当前sum1为{{ sum1 }}</h2>
      <h2>当前sum2为{{ sum2 }}</h2>
      <h2>当前car1为：{{ car1 }}</h2>
      <h2>当前car2为：{{ car2 }}</h2>
      <button @click="changeSum1">点我sum1加一</button>
      <button @click="changeSum2">点我sum2加一</button>
      <button @click="changeBrand">修改品牌</button>
      <button @click="changeColor">修改颜色</button>
      <button @click="changePrice">修改价格</button>
    </div>
  </div>
</template>

<script setup lang="ts" name="App">
import { reactive, readonly, ref, shallowReadonly } from "vue";

let sum1 = ref(0);
let car1 = reactive({
  brand: "奥迪",
  options: {
    color: "黑色",
    price: 100000,
  },
});
let sum2 = readonly(sum1);
let car2 = shallowReadonly(car1);
// readonly参数类型为响应式数据，sum1发生变化sum2也会变化

function changeSum1() {
  sum1.value += 1;
}
function changeSum2() {
  // sum2.value += 1; // 无法赋值因为sum2是只读的
}
function changeBrand() {
  car1.brand = "宝马";
}
function changeColor() {
  car2.options.color = "白色";
}
function changePrice() {
  car2.options.price = 0;
}
</script>
<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10;
  padding: 10px;
}
button {
  margin: 5px;
}
</style>
